<template>
    <view class="container">
        <!-- 顶部轮播图区域 -->
        <swiper class="top-swiper" autoplay="true" interval="3000" circular="true">
            <swiper-item v-for="image in swiperImages" :key="image.id">
                <image :src="image.picUrl" mode="aspectFill" class="top-image-bg"
                    @click="redirectUrl(image.redirectUrl)"></image>
            </swiper-item>
        </swiper>

        <!-- 搜索栏 -->
        <view class="search-bar">
            <tui-icon name="search" size="24" color="#a55fee"></tui-icon>
            <input class="search-input" placeholder="请输入用户ID精确搜索" v-model="searchName" @input="gitMemberList" />
            <button class="search-button" @click="handleSearch">搜索</button>
        </view>

        <!-- 分类块 -->
        <!-- <view class="category-container">
            <view class="category-box" v-for="(category, index) in categories" :key="index">
                <text class="category-title">{{ category.title }}</text>
                <text class="category-subtitle">{{ category.subtitle }}</text>
                <view class="profile-images">
                    <image v-for="(profile, idx) in category.profiles" :key="idx" :src="profile" class="profile-image">
                    </image>
                </view>
            </view>
        </view> -->

        <!-- 会员部分 -->
        <view class="membership">
            <view class="membership-left">
                <view class="membership-icon">❤️</view>
                <text class="membership-title">{{ address }}优质会员</text>
            </view>
            <view class="view-more-container" @click="handleViewMoreClick" v-if="enable">
                <text class="view-more">查看更多</text>
                <text class="iconfont icon-arrow-right"></text>
            </view>
        </view>

        <!-- 用户列表 -->
        <view class="user-list">
            <view class="user-item" v-for="user in users" :key="user.id" @tap="select(user.userId)">
                <view class="user-avatar">
                    <image
                        :src="user.cover && Array.isArray(user.cover) && user.cover.length > 0 ? user.cover[0] : '/static/default-avatar.jpg'"
                        class="avatar-image" />
                </view>
                <view class="user-info">
                    <view class="user-name">
                        <text class="user-name-text">{{ user.name }}</text>
                        <view class="user-tags">
                            <view v-for="(tag, idx) in user.tags" :key="idx" :class="['user-tag', tag.type]">
                                <text class="tag-icon">{{ tag.icon }}</text>
                                <text class="tag-text">{{ tag.label }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="user-details">
                        <text>学历：{{ user.degree }}、</text>
                        <text>职业：{{ user.career }}、</text>
                        <text>性别：{{ user.sex === 1 ? '男' : '女'}}、</text>
                        <text>出生日期：{{ user.birth }}</text>
                    </view>
                </view>
                <view class="user-action" v-if="user.userId!=myuserid&&chat">
                    <view class="hi-button" @tap.stop="hi(user)">Hi</view>
                </view>
            </view>
        </view>

        <!-- 底部导航 -->
        <BottomNav currentPage="home" />
    </view>
</template>

<script>
    import cfg from '@/common/config.js'
    import BottomNav from "./../components/BottomNav.vue";
    export default {
        components: {
            BottomNav,
        },
        data() {
            return {
                chat: false,
                myuserid: '',
                searchName: '',
                address: this.f.storage('address'),
                swiperImages: [],
                categories: [
                    {
                        title: '优质80后',
                        subtitle: '事业有成',
                        profiles: ['../../static/img/marriageHelp/ava/avatar_1.jpg','../../static/img/marriageHelp/ava/avatar_2.jpg','../../static/img/marriageHelp/ava/avatar_3.jpg','../../static/img/marriageHelp/ava/avatar_4.jpg']
                    },
                    {
                        title: '优质90后',
                        subtitle: '与你有共鸣',
                        profiles: ['../../static/img/marriageHelp/ava/avatar_1.jpg','../../static/img/marriageHelp/ava/avatar_2.jpg','../../static/img/marriageHelp/ava/avatar_3.jpg','../../static/img/marriageHelp/ava/avatar_4.jpg']
                    },
                    {
                        title: '本硕博',
                        subtitle: '名校高学历',
                        profiles: ['../../static/img/marriageHelp/ava/avatar_1.jpg','../../static/img/marriageHelp/ava/avatar_2.jpg','../../static/img/marriageHelp/ava/avatar_3.jpg','../../static/img/marriageHelp/ava/avatar_4.jpg']
                    },
                    {
                        title: '高颜值',
                        subtitle: '优秀的TA',
                        profiles: ['../../static/img/marriageHelp/ava/avatar_1.jpg','../../static/img/marriageHelp/ava/avatar_2.jpg','../../static/img/marriageHelp/ava/avatar_3.jpg','../../static/img/marriageHelp/ava/avatar_4.jpg']
                    }
                ],
                enable: false,
                users: [],
                showLoginModal: false, // 控制弹窗显示
                agreeTerms: false,     // 用户是否同意协议
            };
        },
        mounted() {
            var t = this
            t.chat = this.f.storage('switchCfg').module.dating.chat
            if (t.f.isnull(t.f.storage('user_data')) != '') {
                t.myuserid = t.f.storage('user_data').userId
            }
            // t.$api.req(`/station/member/get`,{
            //     id: t.f.storage('user_data').userId
            // },'GET',"JSON",false).then(res1 => {
            //     console.log(res1);
            //     if (res1.data) {

            //     }
            // });
        },
        methods: {
            oneClickLogin() {
                console.log(123);

                uni.navigateTo({
                    url: '/subPackage1/userInfoSelection/userInfoSelection' // 路径根据实际页面位置调整
                });
            },
            checkLoginStatus() {
                // const userToken = uni.getStorageSync('userToken');
                // if (!userToken) {
                // 	this.showLoginModal = true; // 未登录显示弹窗
                // }
            },
            closeLoginModal() {
                this.showLoginModal = false;
            },
            handleViewMoreClick() {
                const userToken = uni.getStorageSync('userToken');
                console.log(userToken)
                this.navigateToMarriageList();
                return
                if (userToken) {
                    // 用户已登录，跳转到助婚列表页面
                    this.navigateToMarriageList();
                } else {
                    // 用户未登录，显示登录弹窗
                    this.showLoginModal = true;
                }
            },
            phoneLogin() {
                uni.navigateTo({
                    url: '/subPackage1/phoneLogin/phoneLogin' // 路径根据实际页面位置调整
                });
            },
            navigateToMarriageList() {
                uni.navigateTo({
                    url: '/subPackage1/marriageList/marriageList' // 路径根据实际页面位置调整
                });
            },
            wechatLogin(e) {
                if (e.detail.userInfo && this.agreeTerms) {
                    // 获取到用户授权信息，使用微信小程序登录
                    wx.login({
                        success: (res) => {
                            if (res.code) {
                                // 使用 res.code 发送给服务器进行登录，获取 userToken
                                // 假设获得 userToken 并保存到本地
                                const userToken = "your_generated_token"; // 服务器返回的用户 token
                                uni.setStorageSync('userToken',userToken); // 保存 token 表示用户已登录
                                this.showLoginModal = false; // 关闭登录弹窗
                                // 跳转到目标页面
                                this.navigateToMarriageList();
                            }
                        }
                    });
                } else if (!this.agreeTerms) {
                    uni.showToast({
                        title: "请先同意用户协议和隐私协议",
                        icon: "none"
                    });
                } else {
                    uni.showToast({
                        title: "请允许授权登录",
                        icon: "none"
                    });
                }
            },
            openUserAgreement() {
                // 打开用户协议页面
                uni.navigateTo({
                    url: "/pages/userAgreement/userAgreement"
                });
            },
            openPrivacyPolicy() {
                // 打开隐私协议页面
                uni.navigateTo({
                    url: "/pages/privacyPolicy/privacyPolicy"
                });
            },

            // 获取轮播图
            getBannerImages() {
                var t = this
                if (!t.enable) return
                this.$api.req('/station/ads/list',{
                    stationId: 1
                },'get','JSON',false).then(res => {
                    this.swiperImages = res.data
                })
            },

            // 轮播图跳转链接
            redirectUrl(url) {
                console.log(url)
                this.f.nav("/subPackage1/marriageMember/marriageMember")
            },

            // 获取会员列表
            gitMemberList() {
                var t = this;
                if (!t.enable) return
                let params = {};

                // 判断是否有搜索条件
                if (this.searchName) {
                    // 有搜索条件时，不带分页参数，只带 name 参数
                    params = { name: this.searchName };
                } else {
                    // 没有搜索条件时，传递分页参数
                    params = { queryType: 'index',pageSize: 10 };
                }

                t.$api.req('/dating/member/page',params,'get','JSON',false).then(res => {
                    t.users = res.data.list;
                    // t.users.forEach(item => {
                    //     item.cover = JSON.parse(item.cover)
                    // })
                    t.users.forEach(item => {
                        // console.log(item);
                        item.cover = JSON.parse(item.cover)
                        item.birth = t.f.formatTimestamp(item.birth,'yyyy-MM-dd');
                    });
                });
            },

            // 搜索按钮点击事件
            handleSearch() {
                // 搜索时调用获取会员列表
                this.gitMemberList();
            },

            // 跳转到用户详细信息页面
            select(id) {
                this.f.nav(`/subPackage1/marriageDetail/marriageDetail?id=${id}`)
                console.log(id)
            },

            // hi 按钮点击事件
            hi(user) {
                this.f.nav(`/subPackage1/chat/chat?userId=${user.userId}&&name=${user.name}`)
            }
        },
        onLoad() {
            var t = this
            uni.request({
                url: cfg.adminurl + '/infra/config/get-value-by-key?key=uniapp.config',
                method: 'GET',
                header: {
                    'tenant-id': '1'  // 设置请求头
                },
                success: (res) => {
                    console.log(res);

                    var switchCfg = JSON.parse(res.data.data)
                    this.f.storage('switchCfg',switchCfg)
                    t.enable = t.f.storage('switchCfg').module.enable
                    console.log('请求成功',res.data.data);
                    setTimeout(() => {
                        this.checkLoginStatus()
                        this.getBannerImages()
                        this.gitMemberList()
                    },100);
                },
                fail: (err) => {
                    console.log('请求失败',err);
                }
            });


        }
    };
</script>

<style>
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* background-color: #f7f7f7; */
    }

    .top-swiper {
        width: 100%;
        height: 400rpx;
    }

    .top-image-bg {
        width: 100%;
        height: 400rpx;
    }

    .search-bar {
        display: flex;
        width: 90%;
        margin-top: 20rpx;
        background-color: #ffffff;
        border-radius: 10px;
        align-items: center;
        padding: 15rpx;
        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
    }

    .search-icon {
        font-size: 28rpx;
        color: #999;
        margin-left: 20rpx;
    }

    .search-input {
        flex: 1;
        height: 60rpx;
        border: none;
        padding-left: 10rpx;
        font-size: 28rpx;
        color: #999;
        background-color: transparent;
    }

    .search-button {
        padding: 0 30rpx;
        background-color: #a55fee;
        color: #fff;
        border-radius: 50rpx;
        font-size: 28rpx;
    }

    .category-container {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 30rpx;
        justify-content: space-between;
    }

    .category-box {
        width: calc(45% - 15rpx);
        /* background: linear-gradient(145deg, #fbc2eb, #a18cd1); */
        border-radius: 10px;
        margin-bottom: 20rpx;
        padding: 20rpx;
        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
        /* box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1); */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .category-title {
        text-align: center;
        font-size: 30rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 5rpx;
    }

    .category-subtitle {
        text-align: center;
        font-size: 24rpx;
        color: #666;
        margin-bottom: 10rpx;
    }

    .profile-images {
        display: flex;
        justify-content: center;
        margin-top: 10rpx;
    }

    .profile-image {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        margin-left: -10rpx;
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    }

    .membership {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        margin-top: 30rpx;
        padding: 20rpx 0;
        /* border-top: 1px solid #eaeaea; */
    }

    .membership-left {
        display: flex;
        align-items: center;
    }

    .membership-icon {
        font-size: 32rpx;
        color: #f73378;
        margin-right: 10rpx;
    }

    .view-more-container {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .view-more {
        font-size: 28rpx;
        color: #999;
        margin-right: 5rpx;
    }

    .iconfont.icon-arrow-right {
        font-size: 28rpx;
        color: #999;
    }

    .user-list {
        width: 90%;
        padding-bottom: 95px;
    }

    .user-item {
        display: flex;
        align-items: center;
        padding: 20rpx;
        height: 80px;
        margin-top: 10px;
        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
        border-radius: 15px;
    }


    .user-avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
        overflow: hidden;
    }

    .avatar-image {
        width: 100%;
        height: 100%;
    }

    .user-info {
        flex: 1;
        margin-left: 20rpx;
    }

    .user-name {
        display: flex;
        align-items: center;
    }

    .user-name-text {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
    }

    .user-tags {
        display: flex;
        margin-left: 10rpx;
    }

    .user-tag {
        display: flex;
        align-items: center;
        border-radius: 5rpx;
        font-size: 22rpx;
        margin: 0 6rpx;
    }

    .tag-icon {
        margin-right: 5rpx;
    }

    .auth {
        background-color: #e6f7ff;
        color: #1890ff;
    }

    .real {
        background-color: #fff1e6;
        color: #fa541c;
    }

    .education {
        background-color: #f4ffde;
        color: #52c41a;
    }

    .work {
        background-color: #fffbe6;
        color: #faad14;
    }

    .user-details {
        font-size: 26rpx;
        color: #666;
        margin-top: 5rpx;
    }

    .user-action {
        display: flex;
        align-items: center;
    }

    .hi-button {
        background-color: #a55fee;
        color: #fff;
        font-size: 28rpx;
        border-radius: 20rpx;
        padding: 10rpx 15rpx;
    }
</style>